<template>
    <div class="main_container">
        <el-form :model="filterInfo" label-width="auto">
            <el-row>
                <el-col :span="7">
                    <el-form-item label="提审人:">
                        <div class="choose_border" @click="chooseUsers('apply')">
                            <span style="color: #c0c4cf;" v-if="!filterInfo.user_name">请选择</span>
                            <span>{{ filterInfo.user_name }}</span>
                            <!-- <i class="el-icon-circle-close icon" @click.stop="clearValue('apply')"></i> -->
                        </div>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="单据类型:">
                        <el-select style="width: 240px;" v-model="filterInfo.table_name" placeholder="请选择" clearable>
                            <el-option label="销售单" value="SaleOrder"></el-option>
                            <el-option label="采购单" value="Purchase"></el-option>
                            <el-option label="销售退单" value="SaleReturn"></el-option>
                            <el-option label="采购退单" value="Return"></el-option>
                            <el-option label="收款单" value="ReceiptPayment"></el-option>
                            <el-option label="付款单" value="BillsPayment"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="7">
                    <el-form-item label="提交日期:">
                        <el-date-picker type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" 
                            v-model="filterInfo.send_time" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                            :picker-options="handleTime" placeholder="请选择日期范围" style="width: 240px;" clearable></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button size="small" icon="el-icon-search" @click="getTodoLists"
                        style="margin: 8px 0 0 20px;" class="btn_primary_color">查询</el-button>
                </el-col>
            </el-row>
        </el-form>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="待审核" name="待审核">
                <div style="max-height: 500px;overflow-y: auto;">
                    <div v-if="todoList&&todoList.length" class="todo_list">
                        <div class="item" v-for="item in todoList" :key="'todo_'+item.id" 
                            @click="cellClick(item, '1')">
                            <div class="left">
                                <div class="circle" @click.stop="chooseItem(item)">
                                    <div v-if="!item.selected" class="radio"></div>
                                    <i v-else class="el-icon-success"></i>
                                </div>
                                <img :src="item.iconPath" class="icon" alt="">
                                <span>{{ item.todoType }}</span>
                            </div>
                            <div class="left">
                                <span style="margin-right: 30px;">{{ '提审人：'+item.username }}</span>
                                <span>{{ item.send_time }}</span>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                    <el-empty v-else :image-size="200"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已通过" name="已通过">
                <div style="height: 500px;overflow-y: auto;">
                    <div v-if="todoList&&todoList.length" class="todo_list">
                        <div class="item" v-for="item in todoList" :key="'todo_'+item.id" 
                            @click="cellClick(item, '2')">
                            <div class="left">
                                <img :src="item.iconPath" class="icon" alt="">
                                <span>{{ item.todoType }}</span>
                            </div>
                            <div class="left">
                                <span style="margin-right: 30px;">{{ '提审人：'+item.username }}</span>
                                <span>{{ item.send_time }}</span>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                    <el-empty v-else :image-size="200"></el-empty>
                </div>
            </el-tab-pane>
            <el-tab-pane label="驳回" name="驳回">
                <div style="height: 500px;overflow-y: auto;">
                    <div v-if="todoList&&todoList.length" class="todo_list">
                        <div class="item" v-for="item in todoList" :key="'todo_'+item.id"
                            @click="cellClick(item, '3')">
                            <div class="left">
                                <img :src="item.iconPath" class="icon" alt="">
                                <span>{{ item.todoType }}</span>
                            </div>
                            <div class="left">
                                <span style="margin-right: 30px;">{{ '提审人：'+item.username }}</span>
                                <span>{{ item.send_time }}</span>
                                <i class="el-icon-arrow-right"></i>
                            </div>
                        </div>
                    </div>
                    <el-empty v-else :image-size="200"></el-empty>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div class="btns" v-if="activeName=='待审核'&&todoList.length">
            <div class="left_view">
                <div class="circle" @click="chooseAll">
                    <div v-if="!selectAll" class="radio"></div>
                    <i v-else class="el-icon-success"></i>
                    <span>全选</span>
                </div>
                <div class="choose">
                    <span style="color: #333;">已选</span>
                    <span style="color: #068cee;font-size: 18px;margin-left: 12px;">{{chooseList.length}}</span>
                </div>
            </div>
            <div class="right_view">
                <div class="left_btn btn" @click="dealSelect('驳回')">驳回</div>
                <div class="right_btn btn" @click="dealSelect('已通过')">通过</div>
            </div>
        </div>
        
        <choose-user
            :showChooseUser="showChooseUserAlert"
            :selectUsers="selectedUsers.users"
            :title="selectedUsers.title"
            @chooseOK="chooseUserOK"
            @hidden="showChooseUserAlert=false"
        ></choose-user>
    </div>
</template>

<script>
import { getUserList } from "@/api/user";
import { getTodoCount, todoApply } from '@/api/login'
import chooseUser from "@/components/chooseUser";

export default {
    name: 'todoList',
    components: {
        chooseUser
    },
    data() {
        return {
            showLoading: false,
            showChooseUserAlert: false,
            userType: '',
            activeName: '待审核',
            todoList: [],
            chooseList: [],
            selectAll: false,
            fullPageLoading: null,  //全屏loading
            salesList: [],
            filterInfo: {
                corp_id: '',
                send_user_id: '',
                user_name: '',
                table_name: '',
                send_time: [],
                send_time__lt: '',
                send_time__gte: ''
            },
            handleTime: {
                disabledDate(date) {
                    //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
                    return date.getTime() > Date.now();
                }
            },
        }
    },
    watch: {
        'filterInfo.send_time': {
            handler(value){
                if(value){
                    this.filterInfo.send_time__lt = value[1]
                    this.filterInfo.send_time__gte = value[0]
                }
                else{
                    this.filterInfo.send_time__lt = this.filterInfo.send_time__gte = null
                }
            },
            deep: true
        },
    },
    computed: {
        selectedUsers() {
            let users = []
            if (this.filterInfo.send_user_id){
                users = [{id: this.filterInfo.send_user_id}]
            }
            let title = '选择申请人'
            return {
                users, title
            }
        }
    },
    created() {
        this.filterInfo.corp_id = this.$store.state.corpId
        this.getTodoLists()
    },
    methods: {
        chooseUsers(type) {
            this.userType = type
            this.showChooseUserAlert = true
        },
        clearValue() {
            this.filterInfo.send_user_id = ''
            this.filterInfo.user_name = ''
        },
        chooseUserOK(res) {
            if (this.userType == 'apply'){
                this.filterInfo.send_user_id = res.length ? res[0].id : ''
                this.filterInfo.user_name = res.length ? res[0].username : ''
            }
            this.showChooseUserAlert = false
        },
        getTodoLists() {
            this.filterInfo.status = this.activeName
            getTodoCount(this.filterInfo).then(res => {
                let list = res.data.Todo_Lists.filter(item => {
                    item.send_time = item.send_time.replace('T', ' ').substring(0, 10)
                    item.send_username = item.send_user.username
                    let type = ''
                    switch (item.table_name){
                        case 'Purchase':
                            type = '采购单'
                            item.iconPath = 'https://anhuiyaoying.com/icon/todo_buy.png'
                            item.pagePath = 'purchaseOrder'
                            item.params = { bussId5: item.table_id, todoId: item.id }
                            break;
                        case 'SaleOrder':
                            type = '销售单'
                            item.iconPath = 'https://anhuiyaoying.com/icon/todo_sale.png'
                            item.pagePath = 'saleOrder'
                            item.params = { bussId8: item.table_id, todoId: item.id }
                            break;
                        case 'Return':
                            type = '采购退单'
                            item.iconPath = 'https://anhuiyaoying.com/icon/todo_cgth.png'
                            item.pagePath = 'purchaseReturn'
                            item.params = { bussId7: item.table_id, todoId: item.id }
                            break;
                        case 'SaleReturn':
                            type = '销售退单'
                            item.iconPath = 'https://anhuiyaoying.com/icon/todo_xsth.png'
                            item.pagePath = 'saleReturn'
                            item.params = { bussId: item.table_id, todoId: item.id }
                            break;
                        case 'ReceiptPayment':
                            type = '收款单'
                            item.iconPath = 'https://anhuiyaoying.com/icon/todo_shoukuan.png'
                            item.pagePath = 'receiveOrder'
                            item.params = { bussId2: item.table_id, todoId: item.id }
                            break;
                        case 'BillsPayment':
                            type = '付款单'
                            item.iconPath = 'https://anhuiyaoying.com/icon/todo_fukuan.png'
                            item.pagePath = 'payOrder'
                            item.params = { bussId1: item.table_id, todoId: item.id }
                            break;
                        case 'ClockIN':
                            type = '考勤'
                            item.iconPath = ''
                            // item.typeColor = '#bb52c6'
                            break;
                        default:
                            break;
                    }
                    item.todoType = type
                    item.selected = false
                    return item
                })
                this.todoList = list
            })
        },
        chooseItem(item) {
            this.todoList.forEach(_item => {
                if (item.id === _item.id){
                    _item.selected = !_item.selected
                    if (_item.selected){
                        this.chooseList.push(_item)
                    }else{
                        this.chooseList = this.chooseList.filter(el => el.id != item.id)
                    }
                }
            })
            if (this.chooseList.length === this.todoList.length){
                this.selectAll = true
            }else{
                this.selectAll = false
            }
        },
        chooseAll() {
            this.selectAll = !this.selectAll
            this.todoList.forEach(item => {
                item.selected = this.selectAll
            })
            this.chooseList = this.selectAll ? this.todoList : []
        },
        dealSelect(type) {
            if (!this.chooseList.length){
                this.$message.error('请选择需要批量处理的待办')
                return
            }
            this.fullPageLoading = this.$loading({
                lock: true,
                text: '正在批量处理待办数据，请稍候...',
                spinner: 'el-icon-loading',
                // background: 'rgba(0, 0, 0, 0.7)'
            });
            this.chooseList.forEach((item, index) => {
                this.handleDeal(item, type, index)
            })
        },
        // 批量处理待办
        handleDeal(item, type, index) {
            todoApply({
                todo_id: item.id,
                status: type,
                corp_id: this.filterInfo.corp_id
            }).then(res => {
                if (index === this.chooseList.length-1){
                    this.todoList = []
                    this.getTodoLists()
                    this.chooseList = []
                    let that = this
                    setTimeout(() => {
                        that.fullPageLoading.close()
                        that.$message.success('处理成功')
                    }, 2000);
                }
            })
        },
        cellClick(item, type) {
            if (item.pagePath){
                item.params.type = type
                this.$router.push({
                    path: item.pagePath,
                    query: item.params
                })
            }
        },
        // 处理待办
        handleClick(tab, event) {
            console.log(tab.name)
            this.getTodoLists()
        },
        // 选择申请人
        salePersonChange(value) {
            let [ id, username ] = value.split('&&')
            this.filterInfo.send_user_id = id
            this.filterInfo.user_name = username
        },
        remoteMethodWithSale(query) {
            if (query !== '') {
                this.showLoading = true
                getUserList({
                    corp: this.filterInfo.corp_id,
                    username: query
                }).then(res => {
                    this.showLoading = false
                    this.salesList = res.data.users.filter(item => {
                        item.label = item.username
                        item.value = item.id+'&&'+item.username
                        if (item.phone_no){
                            item.label += ('（'+item.phone_no+'）')
                        }
                        return item
                    });
                })
            } else {
                this.salesList = []
            }
        },
    }
}
</script>

<style lang="less" scoped>
	@import '../../style/mixin';
    .todo_list {
        display: flex;
        flex-direction: column;
        // align-items: center;
        .item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            height: 40px;
            justify-content: space-between;
            padding: 0 25px 10px 5px;
            border-bottom: 1px solid #eee;
            cursor: pointer;
            .left {
                display: inline-flex;
                align-items: center;
                .tag {
                    width: 46px;
                    height: 22px;
                    line-height: 22px;
                    border-radius: 10px;
                    text-align: center;
                    font-size: 12px;
                    color: #fff;
                    margin-right: 15px;
                }
                span {
                    font-size: 14px;
                    margin-right: 10px;
                }
                .circle {
                    width: 40px;
		            height: 44px;
                    display: inline-flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 10px;
                    .radio {
                        width: 20px;
                        height: 20px;
                        border-radius: 10px;
                        border: 1px solid #c8c9cc;
                        background-color: #fff;
                    }
                    i {
                        color: @blue;
                        font-size: 24px;
                    }
                }
                .icon {
                    width: 25px;
                    height: 25px;
                    margin-right: 10px;
                }
            }
        }
    }
    .btns {
        display: flex;
		align-items: center;
		height: 50px;
        margin-top: 20px;
        .left_view {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 15px;
            .circle {
                height: 44px;
                display: inline-flex;
                justify-content: center;
                align-items: center;
                margin-right: 10px;
                cursor: pointer;
                .radio {
                    width: 20px;
                    height: 20px;
                    border-radius: 10px;
                    border: 1px solid #c8c9cc;
                    background-color: #fff;
                }
                i {
                    color: @blue;
                    font-size: 24px;
                }
                span {
                    font-size: 15px;
                    color: #333;
                    margin-left: 10px;
                }
            }
            .choose {
                display: inline-flex;
		        align-items: center;
                font-size: 15px;
                margin-left: 180px;
                margin-right: 10px;
            }
        }
        .right_view {
            display: flex;
            align-items: center;
            .btn {
                width: 80px;
                height: 38px;
                text-align: center;
                line-height: 38px;
                background: @blue;
                color: #fff;
                font-size: 14px;
                letter-spacing: 1.5px;
                cursor: pointer;
                margin-right: 20px;
                border-radius: 3px;
            }
            .left_btn {
                background: #eee;
                border-left: 1px solid #eee;
                color: #333;
            }
        }
    }
</style>

<style>
.el-loading-spinner {
    top: 42% !important;
    color: #068CEE !important;
}
.el-loading-spinner .el-icon-loading {
    font-size: 34px !important;
    margin-bottom: 15px !important;
}
.el-loading-spinner .el-loading-text {
    font-size: 16px !important;
}
</style>